function ModeSelector(parent, player) {
    this.player = player;
    this.parent = parent;

    this.create(parent);
};

ModeSelector.prototype.create = function (parentEl) {
    this.readerButton = $("<span id=\"ms_reader\" class=\"modeselector\">Reader</span>")
        .on("click", $.proxy(this.onReaderButtonClick, this));
    this.leanbackButton = $("<span id=\"ms_leanback\" class=\"modeselector\">Leanback</span>")
        .on("click", $.proxy(this.onLeanbackButtonClick, this));
    this.skimmerButton = $("<span id=\"ms_skimmer\" class=\"modeselector\">Skimmer</span>")
        .on("click", $.proxy(this.onSkimmerButtonClick, this));
    var container = $("#modeselector_container");

    parentEl.prepend(
        container
            .append("This is a multi-format document. Choose a format you like the best ")
            .append(this.skimmerButton)
            .append(this.leanbackButton)
            .append(this.readerButton)
    );
};

ModeSelector.prototype.onReaderButtonClick = function () {
    // Remove active button classes
    $("#container").addClass("mode_reader");
    $("#container").removeClass("mode_leanback");
    $("#container").removeClass("mode_skimmer");    

    this.player.changeSrc(this.player.getTitleVideo(), true);
    this.player.play();
    $("#player").removeClass("idle");
    //$("#video_ctrl").hide();
};

ModeSelector.prototype.onLeanbackButtonClick = function () {
    $("#container").addClass("mode_leanback");
    $("#container").removeClass("mode_reader");
    $("#container").removeClass("mode_skimmer");
    //$("#video_ctrl").show();
};

ModeSelector.prototype.onSkimmerButtonClick = function () {
    $("#container").addClass("mode_skimmer");
    $("#container").removeClass("mode_leanback");
    $("#container").removeClass("mode_reader");
    //$("#video_ctrl").show();
};